<tabset #tabs>
  <tab *ngFor="let exchange of this.view.messagesMap[item.name]; index as i" [active]="isActive(exchange) || (!hasAnyMatch() && i === 0)" (select)="onTabSelected(exchange)">
    <ng-template tabHeading (click)="onTabSelected(exchange)">
      <a [routerLink]="[]" [queryParams]="{ operation: item.name, exchange: getExchangeName(exchange) }" queryParamsHandling="merge" class="tab-heading-link" style="display: inline-flex; align-items: center; gap: 6px; text-decoration: none;">
        <span>{{ getExchangeName(exchange) }}</span>
        <span class="learn-more-inline" id="source-artifact-icon">
          <i tooltip="Source artifact: {{ getExchangeSourceArtifact(exchange) }}" containerClass="tooltip-break" class="pficon pficon-resources-almost-empty" aria-hidden="true" id="custom-tooltip"></i>
        </span>
        <span class="learn-more-inline" id="copy-exchange-link-icon">
          <i tooltip="Copy link to '{{ getExchangeName(exchange)}}' Mock" class="fa fa-link" style="cursor:pointer" (click)="copyExchangeLink(exchange)"></i>
        </span>
      </a>
    </ng-template>

    <div *ngIf="shouldRender(i)">
      <div class="exchange-container" *ngIf="isEventTypeService()">
        <div class="exchange-column">
          <h5 class="subsection-label">Message</h5>
          <dl class="dl-horizontal left">
            <dt>Content Type:</dt>
            <dd><code><small>{{ getUnidirEvent(exchange).eventMessage.mediaType }}</small></code></dd>
          </dl>
          <pre *ngIf="getUnidirEvent(exchange).eventMessage.content" class="hljs"><code [highlightAuto]="prettyPrintIfJSON(getUnidirEvent(exchange).eventMessage.content)" [languages]="hlLang"></code></pre>
          <table class="table table-condensed" width="100%" *ngIf="getUnidirEvent(exchange).eventMessage.headers">
            <thead>
              <tr>
                <th>Header name</th>
                <th>Values</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let header of getUnidirEvent(exchange).eventMessage.headers">
                <td>{{ header.name }}</td>
                <td style="max-width:200px; word-wrap:break-word"><span *ngFor="let v of header.values; let last = last">{{ v }}{{ last ? '':', '}}</span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="exchange-column">
          <h5 class="subsection-label">Bindings details</h5>
          <span *ngIf="hasBinding(item, 'KAFKA')">
            <dl class="dl-horizontal left">
              <dt>Kafka topic:</dt>
              <dd>
                <div class="input-group">
                  <input type="text" class="form-control" value="{{ formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'KAFKA') }}" disabled/>
                  <span class="input-group-addon">
                    <i class="fa fa-paste" tooltip="Copy to Clipboard" placement="top"
                      (click)="copyToClipboard(formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'KAFKA'))"></i>
                  </span>
                </div>
              </dd>
              <dt>Kafka Key type:</dt>
              <dd>{{ getBindingProperty(item, 'KAFKA', 'keyType') }}</dd>
            </dl>
          </span>
          <span *ngIf="hasBinding(item, 'MQTT')">
            <dl class="dl-horizontal left">
              <dt>MQTT topic:</dt>
              <dd>
                <div class="input-group">
                  <input type="text" class="form-control" value="{{ formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'MQTT') }}" disabled/>
                  <span class="input-group-addon">
                    <i class="fa fa-paste" tooltip="Copy to Clipboard" placement="top"
                      (click)="copyToClipboard(formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'MQTT'))"></i>
                  </span>
                </div>
              </dd>
              <dt>MQTT QoS:</dt>
              <dd>{{ getBindingProperty(item, 'MQTT', 'qoS') }}</dd>
              <dt>MQTT retain:</dt>
              <dd>{{ getBindingProperty(item, 'MQTT', 'persistent') }}</dd>
            </dl>
          </span>
          <span *ngIf="hasBinding(item, 'NATS')">
            <dl class="dl-horizontal left">
              <dt>NATS topic:</dt>
              <dd>
                <div class="input-group">
                  <input type="text" class="form-control" value="{{ formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'NATS') }}" disabled/>
                  <span class="input-group-addon">
                    <i class="fa fa-paste" tooltip="Copy to Clipboard" placement="top"
                      (click)="copyToClipboard(formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'NATS'))"></i>
                  </span>
                </div>
              </dd>
            </dl>
          </span>
          <span *ngIf="hasBinding(item, 'WS')">
            <dl class="dl-horizontal left">
              <dt>WebSocket endpoint:</dt>
              <dd>
                <div class="input-group">
                  <input type="text" class="form-control" value="{{ formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'WS') }}" disabled/>
                  <span class="input-group-addon">
                    <i class="fa fa-paste" tooltip="Copy to Clipboard" placement="top"
                        (click)="copyToClipboard(formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'WS'))"></i>
                  </span>
                </div>
              </dd>
              <dt>WS method:</dt>
              <dd>{{ getBindingProperty(item, 'WS', 'method') }}</dd>
            </dl>
          </span>
          <span *ngIf="hasBinding(item, 'AMQP')">
            <dl class="dl-horizontal left">
              <dt>AMQP exchange:</dt>
              <dd>
                <div class="input-group">
                  <input type="text" class="form-control" value="{{ formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'AMQP') }}" disabled/>
                  <span class="input-group-addon">
                    <i class="fa fa-paste" tooltip="Copy to Clipboard" placement="top"
                        (click)="copyToClipboard(formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'AMQP'))"></i>
                  </span>
                </div>
              </dd>
              <dt>AMQP exchange type:</dt>
              <dd>{{ getBindingProperty(item, 'AMQP', 'destinationType') }}</dd>
            </dl>
          </span>
          <span *ngIf="hasBinding(item, 'GOOGLEPUBSUB')">
            <dl class="dl-horizontal left">
              <dt>Google PubSub topic:</dt>
              <dd>
                <div class="input-group">
                  <input type="text" class="form-control" value="{{ formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'GOOGLEPUBSUB') }}" disabled/>
                  <span class="input-group-addon">
                    <i class="fa fa-paste" tooltip="Copy to Clipboard" placement="top"
                        (click)="copyToClipboard(formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'GOOGLEPUBSUB'))"></i>
                  </span>
                </div>
              </dd>
            </dl>
          </span>
          <span *ngIf="hasBinding(item, 'SQS')">
            <dl class="dl-horizontal left">
              <dt>AWS SQS Queue:</dt>
              <dd>
                <div class="input-group">
                  <input type="text" class="form-control" value="{{ formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'SQS') }}" disabled/>
                  <span class="input-group-addon">
                    <i class="fa fa-paste" tooltip="Copy to Clipboard" placement="top"
                        (click)="copyToClipboard(formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'SQS'))"></i>
                  </span>
                </div>
              </dd>
              <dt>AWS SQS persistent:</dt>
              <dd>{{ getBindingProperty(item, 'SQS', 'persistent') }}</dd>
            </dl>
          </span>
          <span *ngIf="hasBinding(item, 'SNS')">
            <dl class="dl-horizontal left">
              <dt>AWS SNS Topic:</dt>
              <dd>
                <div class="input-group">
                  <input type="text" class="form-control" value="{{ formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'SNS') }}" disabled/>
                  <span class="input-group-addon">
                    <i class="fa fa-paste" tooltip="Copy to Clipboard" placement="top"
                        (click)="copyToClipboard(formatAsyncDestination(item, getUnidirEvent(exchange).eventMessage, 'SNS'))"></i>
                  </span>
                </div>
              </dd>
            </dl>
          </span>
          <span *ngIf="hasBinding(item, 'AMQP1')">
            <dl class="dl-horizontal left">
              <dt>AMQP destination:</dt>
              <dd>
                <div class="input-group">
                  <input type="text" class="form-control" value="topic/UsersignedupAPI_0.1.0_user-signedup" disabled/>
                  <span class="input-group-addon">
                    <i class="fa fa-paste" tooltip="Copy to Clipboard" placement="top"
                      (click)="copyToClipboard('topic/UsersignedupAPI_0.1.0_user-signedup')"></i>
                  </span>
                </div>
              </dd>
            </dl>
          </span>
        </div>
      </div>
      <div class="exchange-container" *ngIf="!isEventTypeService()">
        <div class="exchange-column">
          <h5 class="subsection-label">Request</h5>
          <dl>
            <dt style="width: 100%; display: flex; justify-content: space-between">
              <span>Mock URL:</span>
              <span *ngIf="view.service.type === 'REST' || view.service.type === 'SOAP_HTTP'" style="font-weight: 500">
                <select class="tiny-form-control" [(ngModel)]="urlType">
                  <option>raw</option>
                  <option>valid</option>
                </select>
              </span>
            </dt>
            <dd>
              <div class="input-group">
                <input type="text" class="form-control" value="{{ formatMockUrl(item, getReqRespPair(exchange).response.dispatchCriteria, getReqRespPair(exchange).request.queryParameters) }}" disabled/>
                <span class="input-group-addon" style="border-left: 0;">
                  <i class="fa fa-paste" tooltip="Copy to Clipboard" placement="top"
                    (click)="copyToClipboard(formatMockUrl(item, getReqRespPair(exchange).response.dispatchCriteria, getReqRespPair(exchange).request.queryParameters))"></i>
                </span>
                <span class="input-group-addon">
                  <i class="fa fa-terminal" tooltip="Curl to Clipboard" placement="top"
                    (click)="copyToClipboard(formatCurlCmd(item, getReqRespPair(exchange)), 'Curl command')"></i>
                </span>
              </div>
            </dd>
          </dl>
          <pre *ngIf="getReqRespPair(exchange).request.content" class="hljs"><code [highlightAuto]="formatRequestContent(getReqRespPair(exchange).request.content)" [languages]="hlLang"></code></pre>
          <dl *ngIf="view.service.type === 'GRAPHQL'">
            <dt>Variables</dt>
            <dd>
              <pre class="hljs"><code [highlightAuto]="formatGraphQLVariables(getReqRespPair(exchange).request.content)" [languages]="hlLang"></code></pre>
            </dd>
          </dl>

          <table class="table table-condensed" width="100%" *ngIf="getReqRespPair(exchange).request.headers">
            <thead>
              <tr>
                <th>Header name</th>
                <th>Values</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let header of getReqRespPair(exchange).request.headers">
                <td>{{ header.name }}</td>
                <td style="max-width:200px; word-wrap:break-word"><span *ngFor="let v of header.values; let last = last">{{ v }}{{ last ? '':', '}}</span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="exchange-column">
          <h5 class="subsection-label">Response</h5>
          <dl class="dl-horizontal left" *ngIf="view.service.type === 'REST' || view.service.type === 'GRAPHQL'" >
            <dt>Response Code and Type:</dt>
            <dd style="margin-left: 0;">
              <code><small>{{ getReqRespPair(exchange).response.status }}: {{getReqRespPair(exchange).response.mediaType}}</small></code>
            </dd>
          </dl>
          <dl class="dl-horizontal left" *ngIf="view.service.type === 'GRPC'" >
            <dt>Response Code and Type:</dt>
            <dd style="margin-left: 0;">
              <code><small>{{ getReqRespPair(exchange).response.status }}: {{ getGRPCMediaType(getReqRespPair(exchange)) }}</small></code>
            </dd>
          </dl>
          <pre *ngIf="getReqRespPair(exchange).response.content" class="hljs"><code [highlightAuto]="prettyPrintIfJSON(getReqRespPair(exchange).response.content)" [languages]="hlLang"></code></pre>
          <table class="table table-condensed" width="100%" *ngIf="getReqRespPair(exchange).response.headers">
            <thead>
              <tr>
                <th>Header name</th>
                <th>Values</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let header of getReqRespPair(exchange).response.headers">
                <td>{{ header.name }}</td>
                <td style="max-width:200px; word-wrap:break-word"><span *ngFor="let v of header.values; let last = last">{{ v }}{{ last ? '':', '}}</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>
  </tab>
</tabset>
